<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		hr{
			border: 1px solid #666;
		}
		body{
			margin: 50px;
		}
	</style>
</head>
<body>
	<!-- tab标签页插件就是通常所说的选项卡功能 -->
	<ul class="nav nav-tabs">
		<li class="active"><a href="#html5">HTML5</a></li>  <!-- 通过data-toggle="tab"属性的方式 -->
		<li><a href="#javascript">JavaScript</a></li>
		<li><a href="#css3">CSS3</a></li>
		<li><a href="#extjs">Extjs</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="html5">HTML5....</div>
		<div class="tab-pane" id="javascript">JavaScript....</div>
		<div class="tab-pane" id="css3">CSS3....</div>
		<div class="tab-pane" id="extjs">Extjs....</div>
	</div>


	<script>
		$('.nav li a').on('click',function(e){
			e.preventDefault();
			$(this).tab('show');
		});

		//事件
		$('.nav li a').on('show.bs.tab',function(){
			console.log('选项卡即将切换');
		});
		$('.nav li a').on('shown.bs.tab',function(){
			console.log('选项卡已经切换');
		})

	</script>




</body>
</html>